<template>
  <div class="terms-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-bg"></div>
      <div class="header-content">
        <h1 class="page-title">服务条款</h1>
        <p class="page-subtitle">校园二手交易平台用户服务协议</p>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <div class="container">
        <div class="terms-content">
          <div class="terms-intro">
            <p>欢迎使用校园二手交易平台（以下简称"平台"）。请您仔细阅读以下服务条款，使用本平台即表示您同意遵守本协议的所有内容。</p>
            <p class="last-updated">最后更新日期：2024年10月15日</p>
          </div>

          <div class="terms-sections">
            <section class="terms-section">
              <h2 class="section-title">1. 服务内容</h2>
              <div class="section-content">
                <p>校园二手交易平台是一个为在校师生提供二手商品发布、浏览、交易和管理服务的网络平台。平台旨在促进校园内闲置物品的有效流通，倡导环保、节约的校园文化。</p>
                <p>我们提供以下核心服务：</p>
                <ul>
                  <li>用户注册与账号管理服务</li>
                  <li>商品发布、编辑、删除和管理服务</li>
                  <li>商品搜索、筛选和浏览服务</li>
                  <li>买卖双方沟通与协商服务</li>
                  <li>交易管理与订单跟踪服务</li>
                  <li>投诉与争议解决服务</li>
                </ul>
              </div>
            </section>

            <section class="terms-section">
              <h2 class="section-title">2. 用户注册与账号管理</h2>
              <div class="section-content">
                <p>2.1 注册资格：您必须是在校大学生或教职工，提供真实有效的校园邮箱或学生证信息完成注册。</p>
                <p>2.2 账号安全：您应妥善保管账号和密码，因账号密码保管不善造成的损失由您自行承担。</p>
                <p>2.3 信息更新：您应及时更新账号信息，确保其真实性、准确性和完整性。</p>
                <p>2.4 账号使用：每个用户只能注册一个账号，禁止转借、出租或出售账号。</p>
              </div>
            </section>

            <section class="terms-section">
              <h2 class="section-title">3. 商品发布规则</h2>
              <div class="section-content">
                <p>3.1 商品真实性：您发布的商品信息必须真实、准确，不得发布虚假信息。</p>
                <p>3.2 商品合法性：禁止发布违禁商品，包括但不限于：</p>
                <ul>
                  <li>假冒伪劣商品</li>
                  <li>盗版书籍、音像制品等知识产权侵权商品</li>
                  <li>管制刀具、易燃易爆等危险物品</li>
                  <li>非法出版物、黄色或暴力内容的商品</li>
                  <li>其他法律法规禁止交易的物品</li>
                </ul>
                <p>3.3 商品描述：商品描述应详细说明商品的品牌、型号、使用情况、成色等信息。</p>
                <p>3.4 图片要求：商品图片应清晰展示商品的实际情况，建议使用实物拍摄。</p>
                <p>3.5 价格设置：价格设置应合理，不得恶意哄抬价格或低价扰乱市场秩序。</p>
              </div>
            </section>

            <section class="terms-section">
              <h2 class="section-title">4. 交易规则</h2>
              <div class="section-content">
                <p>4.1 交易方式：支持平台担保交易和线下当面交易两种方式。</p>
                <p>4.2 交易安全：建议优先选择平台担保交易，避免直接转账。</p>
                <p>4.3 支付规则：通过平台支付系统完成的交易，应按照平台规定的支付流程操作。</p>
                <p>4.4 收货确认：收到商品并确认无误后，应及时点击"确认收货"。</p>
                <p>4.5 交易凭证：交易过程中应保留聊天记录和支付凭证等证据。</p>
              </div>
            </section>

            <section class="terms-section">
              <h2 class="section-title">5. 用户行为规范</h2>
              <div class="section-content">
                <p>5.1 遵守法律法规：用户在使用平台过程中必须遵守相关法律法规。</p>
                <p>5.2 尊重他人权益：不得侵犯他人的知识产权、隐私权等合法权益。</p>
                <p>5.3 文明交流：在平台交流过程中应保持文明礼貌，不得进行人身攻击或侮辱。</p>
                <p>5.4 禁止欺诈：不得通过虚假信息、恶意串通等方式进行欺诈活动。</p>
                <p>5.5 禁止刷屏：不得在平台上发布大量重复内容或与商品无关的信息。</p>
              </div>
            </section>

            <section class="terms-section">
              <h2 class="section-title">6. 平台权利与义务</h2>
              <div class="section-content">
                <p>6.1 服务提供：平台应按照协议约定提供稳定的服务。</p>
                <p>6.2 内容审核：平台有权对用户发布的内容进行审核，对于违规内容有权进行删除。</p>
                <p>6.3 账号管理：对于违反规定的账号，平台有权采取警告、限制功能、暂停或永久封禁等措施。</p>
                <p>6.4 隐私保护：平台应采取措施保护用户隐私，但不排除因技术原因导致的信息泄露风险。</p>
                <p>6.5 技术支持：平台应提供必要的技术支持，协助用户解决使用过程中遇到的问题。</p>
              </div>
            </section>

            <section class="terms-section">
              <h2 class="section-title">7. 知识产权</h2>
              <div class="section-content">
                <p>7.1 平台知识产权：平台上的所有内容（包括但不限于文字、图片、音频、视频、软件等）的知识产权归平台所有。</p>
                <p>7.2 用户内容：用户对其发布的内容享有著作权，但授予平台永久的、不可撤销的、免费的使用权。</p>
                <p>7.3 禁止侵权：用户不得在平台上发布侵犯他人知识产权的内容。</p>
              </div>
            </section>

            <section class="terms-section">
              <h2 class="section-title">8. 免责声明</h2>
              <div class="section-content">
                <p>8.1 服务中断：因不可抗力或第三方原因导致服务中断或数据丢失的，平台不承担责任。</p>
                <p>8.2 交易风险：用户之间的交易风险由用户自行承担，平台仅提供交易平台服务。</p>
                <p>8.3 内容责任：用户发布的内容责任由用户自行承担，平台不承担连带责任。</p>
                <p>8.4 第三方链接：平台上的第三方链接由第三方负责，平台不承担责任。</p>
              </div>
            </section>

            <section class="terms-section">
              <h2 class="section-title">9. 协议修改与终止</h2>
              <div class="section-content">
                <p>9.1 协议修改：平台有权修改本协议，修改后的协议将在平台上公布。</p>
                <p>9.2 协议终止：用户可以随时停止使用平台服务；平台也可以根据规定终止提供服务。</p>
                <p>9.3 终止后果：协议终止后，用户应停止使用平台服务，并删除所有相关数据。</p>
              </div>
            </section>

            <section class="terms-section">
              <h2 class="section-title">10. 争议解决</h2>
              <div class="section-content">
                <p>10.1 协商解决：如发生争议，双方应首先通过友好协商解决。</p>
                <p>10.2 平台调解：协商不成的，可以请求平台进行调解。</p>
                <p>10.3 法律诉讼：调解不成的，任何一方均有权向平台所在地有管辖权的人民法院提起诉讼。</p>
              </div>
            </section>

            <section class="terms-section">
              <h2 class="section-title">11. 其他条款</h2>
              <div class="section-content">
                <p>11.1 协议生效：本协议自用户注册或使用平台服务之日起生效。</p>
                <p>11.2 协议解释：本协议的最终解释权归平台所有。</p>
                <p>11.3 联系我们：如有任何问题，请通过平台提供的联系方式与我们联系。</p>
              </div>
            </section>
          </div>

          <div class="terms-contact">
            <h3 class="contact-title">如有问题，请联系我们</h3>
            <p class="contact-info">电话：400-123-4567 | 邮箱：support@campustrade.com | 工作时间：周一至周五 9:00-18:00</p>
            <router-link to="/contact" class="contact-button">立即联系</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // 设置页面标题
  document.title = '服务条款 - 校园二手交易平台'
})
</script>

<style scoped>
.terms-container {
  min-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
}

/* 页面头部样式 */
.page-header {
  position: relative;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  overflow: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
  z-index: 1;
}

.header-content {
  position: relative;
  z-index: 2;
}

.page-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.page-subtitle {
  font-size: 16px;
  opacity: 0.9;
}

/* 主内容区样式 */
.main-content {
  flex: 1;
  padding: 60px 0;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.terms-content {
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

/* 介绍部分样式 */
.terms-intro {
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid #f0f0f0;
}

.terms-intro p {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 15px;
}

.last-updated {
  color: #999 !important;
  font-size: 14px !important;
  text-align: right;
  margin-top: 20px;
}

/* 条款部分样式 */
.terms-sections {
  margin-bottom: 40px;
}

.terms-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 22px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
  position: relative;
  padding-left: 15px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

.section-content {
  color: #666;
  line-height: 1.8;
  padding-left: 15px;
}

.section-content p {
  margin-bottom: 15px;
  text-align: justify;
}

.section-content ul {
  margin-bottom: 15px;
  padding-left: 25px;
}

.section-content ul li {
  margin-bottom: 10px;
  position: relative;
}

.section-content ul li::marker {
  color: #667eea;
}

/* 联系部分样式 */
.terms-contact {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  margin-top: 40px;
}

.contact-title {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
}

.contact-info {
  color: #666;
  margin-bottom: 25px;
  line-height: 1.6;
}

.contact-button {
  display: inline-block;
  padding: 12px 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-decoration: none;
  border-radius: 25px;
  font-weight: 600;
  transition: all 0.3s ease;
  font-size: 16px;
}

.contact-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 30px;
  }
  
  .terms-content {
    padding: 30px 20px;
  }
  
  .section-title {
    font-size: 20px;
  }
  
  .section-content {
    font-size: 15px;
  }
  
  .terms-contact {
    padding: 25px 20px;
  }
  
  .contact-button {
    padding: 10px 25px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .page-header {
    height: 200px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .terms-content {
    padding: 25px 15px;
  }
  
  .section-title {
    font-size: 18px;
  }
  
  .section-content p {
    font-size: 14px;
  }
  
  .contact-info {
    font-size: 14px;
  }
}
</style>